import classNames from 'classnames'
import { ReactNode } from 'react'
import styels from './index.module.scss'

// 使用 interface 继承 input 内的属性
interface props
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  extra?: ReactNode
  className?: string
  errMsg?: string
}

export default function Input({ extra, className, errMsg, ...rest }: props) {
  return (
    <div className={styels.root}>
      {/*  */}
      <input className={classNames('input', className)} {...rest} />
      {errMsg ? <div className="validate">{errMsg}</div> : null}
      {extra ? <div className="extra">{extra}</div> : null}
    </div>
  )
}
